<div style="display: flex">
  <p style="padding-left: 18px; margin: 0">{{title}}</p>

  <!-- 今日应跟踪头部 -->
  <ul *ngIf=" key === 1" class="header-ul">
    <li style="color: #fff;">{{ todayLeft }}<span>{{ allData['XINKGZ'] }}/{{ allData['XUKGZ'] }} , </span></li>
    <li style="color: #fff;">{{ todayCenter }}<span>{{ allData['XINYGZ'] }}/{{ allData['XUYGZ'] }}</span></li>
  </ul>
  <!-- 定损方案&核损方案头部 -->
  <ul *ngIf="key === 2" class="header-ul">
    <li>{{ todayLeft }}<span>{{ allData['WZD'] }}</span></li>
    <li>{{ todayCenter }}<span>{{ allData['YZD'] }}</span></li>
  </ul>
  <!-- 今日门店报案跟踪头部 -->
  <ul *ngIf="key === 3" class="header-ul">
    <li>{{ todayLeft }}<span>{{ allData['MDYIGZ'] }} / </span></li>
    <li style="color: #f8cc04">{{ todayCenter }}<span>{{ allData['WGZ'] }}</span></li>
    <li>{{ todayEnd }}<span>{{ allData['YDD'] }}</span></li>
  </ul>
  <!-- 历史应跟踪 -->
  <ul *ngIf="key === 4" class="header-ul">
    <li>{{ todayLeft }}<span>{{ allData['SWYINGZ'] }}</span></li>
    <li>{{ todayCenter }}<span>{{ allData['MDYINGZ'] }}</span></li>
  </ul>
</div>

<table [ngStyle]="{ width: tabWidth }" style="table-layout: fixed">
  <thead>
  <tr>
    <td *ngFor="let header of titleList" [ngStyle]="{width: header.width}">
      <span>{{ header.lable }}</span>
    </td>
  </tr>
  </thead>
  <tbody *ngIf="key !== 1">
  <tr *ngFor="let page of reportData">
    <td *ngFor="let header of titleList" [class.warning]='page["CSSC"] > 30'
        [class.error]='page["TIO"] > (60 * 24)'
        [class.eer]='page["TDOT"] > ( 60 * 48)'
        [class.none]='page["BJJG"] === "超时未询价" ' >
                <span *ngIf=' ("YGSC" !== header["feild"]) && ("TIO" !== header["feild"])
                           && ("TDOT" !== header["feild"]) && ("JGTS" !== header["feild"])'>

                    <img *ngIf=' "BXGSTB" === header["photo"] ' class="bxlogo"
                         [src]="page['BXGSTB'] ? 'http://yyftp.jekunauto.com/' + page['BXGSTB'] : '' "/>

                    <img *ngIf=' "CLTB" === header["logo"] ' class="logo"
                         [src]="page['CLTB'] ? 'http://yyftp.jekunauto.com/' + page['CLTB'] : 'http://yyftp.jekunauto.com/default/Logo51*51.png' "/>
                    <img *ngIf=' "TPLJ" === header["logo"] ' class="logo"
                         [src]="page['TPLJ'] ? page['TPLJ'] : 'http://yyftp.jekunauto.com/default/Logo51*51.png' "/>
                    {{ page[header['feild']] }}
                </span>
      <!-- 超时半小时 -->
      <i *ngIf=' "YGSC" === header["feild"] '>
        {{ toHourMinute(page["YGSC"]) }}
        <!--<img *ngIf=' "YGSC" === header["feild"] ' class="waringImg"-->
        <!--[src]=" (page['YGSC'] > 30) ? './assets/tmp/img/bi/swzx_06.png' : './assets/tmp/img/bi/jinggao.png' "/>-->
      </i>
      <!-- 超时两小时 -->
      <i *ngIf=' "TIO" === header["feild"] '>
        {{ toHourMinute(page["TIO"]) }}
      </i>
      <!-- 超时两天 -->
      <i *ngIf=' "TDOT" === header["feild"] '>
        {{ toHourMinute(page["TDOT"]) }}
      </i>
      <!-- 间隔天数 -->
      <i *ngIf=' "JGTS" === header["feild"] '>
        {{ toHourMinute(page["JGTS"]) }}
      </i>

    </td>
  </tr>
  </tbody>

  <tbody *ngIf=" key === 1">
  <tr *ngFor="let page of reportData">
    <td *ngFor="let header of titleList">
      <span *ngIf=' ("MDMC" === header["feild"])'>{{ page[header['feild']] }}</span>
      <i *ngIf='("MDMC" !== header["feild"])'> {{ page[header['feild']] }} / {{ page[header['filed']] }}</i>
    </td>
  </tr>
  </tbody>
</table>

